/*
 * @Author: qiuziz
 * @Date: 2017-08-16 14:49:18
 * */

import React, { Component } from 'react';
import './index.scss';
import { Resource } from '../../../service/resource';
import BrowserUtils from '../../../service/history';
import { NavBar, Flex, Switch, Button, InputItem, Toast } from 'antd-mobile';

export default class EmployeeInfoEdit extends Component {
  constructor(props) {
    super(props);
    const info = props.location.state && props.location.state.info,
      type = props.location.state && props.location.state.type;
    this.state = {
      info: info || {
        userName: '',
        passWord: '',
        nickName: '',
        org: '',
        role: 0
      },
      newPwd: '',
      rePwd: '',
      type: type
    }
  }
  componentDidMount() {
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.state && nextProps.location.state.info) {
      this.setState({info: nextProps.location.state.info});
    } else {
      this.setState({
        info: {
          userName: '',
          passWord: '',
          nickName: '',
          org: '',
          role: 0
        },
        newPwd: '',
        rePwd: '',
        type: nextProps.location.state && nextProps.location.state.type
      });
    }
  }

  onTouchTapBack() {
    BrowserUtils.goBack();
  }

  editInfo(value, type) {
    const { info } = this.state;
    if (type === 'newPwd' || type === 'rePwd') {
      this.setState({[type]: value});
      return;
    }
    if (type === 'nickName') {
      info.nickName = value;
    }
    if (type === 'userName') {
      info.userName = value;
    }
    if (type === 'role') {
      info.role = value ? 1 : 0;
    }
    this.setState({info});

  }

  updateInfo() {
    const { info, newPwd, rePwd } = this.state;
    if (newPwd && rePwd && newPwd === rePwd) {
      info.passWord = rePwd;
    }
    info.aaa = 1;
    Resource.updateUser.post(null, info).then(res => {
      if(res && res.result === 1) {
        Toast.success('修改成功', 2);
        this.onTouchTapBack();
      } else {
        Toast.fail('修改失败', 2);
      }
    }).catch(err => {
      console.log(err);
      Toast.fail('修改失败', 2);
    })
  }

  outIsService() {
    const { info } = this.state;
    info.valid = 0;
    Resource.updateUser.post(null, info).then(res => {
      if(res && res.result === 1) {
        Toast.success('提交成功', 2);
        this.onTouchTapBack();
      }
    }).catch(err => {
      Toast.fail('提交失败', 2);
      console.log(err);
    });
  }

  addUser() {
    const { info, newPwd, rePwd } = this.state;
    if (newPwd && rePwd && newPwd === rePwd) {
      info.passWord = rePwd;
    }
    Resource.addUser.post(null, info).then(res => {
      if (res.result === 0) {
        Toast.fail('添加失败', 2);
      } else if (res.result === 1) {
        Toast.success('添加成功', 2);
        this.onTouchTapBack();
      } else if (res.result === 2){
        Toast.fail('已存在', 2);
      }
    }).catch(err => {
      Toast.fail('添加失败', 2);
      console.log(err);
    });
  }

  render() {
    const { info, newPwd, rePwd, type } = this.state,
      btnOptions = type === 'add'
                      ? <Flex className="inputItem" justify="around">
                          <Button className="btn" type="primary" onTouchTap={() => this.addUser()}>提交</Button>
                          <Button className="btn" type="ghost" onTouchTap={() => this.onTouchTapBack()}>取消</Button>
                        </Flex>
                      : <Flex className="inputItem" justify="around">
                          <Button className="btn" type="primary" onTouchTap={() => this.updateInfo()}>修改</Button>
                          <Button className="btn" type="warning" onTouchTap={() => this.outIsService()}>停用</Button>
                        </Flex>;
    return (
      <Flex className="edit" direction="column" align="start" style={{display: this.props.display}}>
        <NavBar
        mode="dark"
        className="am-tab-bar-bar"
        style={{top: 0}}
        onLeftClick={() => this.onTouchTapBack()}
        >
        {type === 'add' ? '员工添加' : '员工信息修改'}
        </NavBar>
        <Flex className="content" direction="column" align="center">
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">用户名：</Flex.Item>
            <InputItem
              className="input"
              value={info.userName}
              placeholder={type === 'add' ? '请输入用户名' : ""}
              editable={type === 'add' ? true : false}
              onChange={value => this.editInfo(value, 'userName')}
              />
            </Flex>
            <Flex className="inputItem" justify="between">
              <Flex.Item className="label">密码：</Flex.Item>
              <InputItem
                className="input"
                type="password"
                value={newPwd}
                clear
                placeholder={type === 'add' ? '请输入密码' : "新密码"}
                onChange={value => this.editInfo(value, 'newPwd')}
                />
            </Flex>
            <Flex className="inputItem" justify="between">
              <Flex.Item className="label">确认密码：</Flex.Item>
              <InputItem
                className="input"
                type="password"
                value={rePwd}
                clear
                placeholder="确认密码"
                onChange={value => this.editInfo(value, 'rePwd')}
              />
            </Flex>
            <Flex className="inputItem" justify="between">
              <Flex.Item className="label">昵称：</Flex.Item>
              <InputItem
                className="input"
                clear
                value={info.nickName}
                placeholder={type === 'add' ? '请输入昵称' : ""}
                onChange={value => this.editInfo(value, 'nickName')}
              />
            </Flex>
          { type !== 'add' &&
            <Flex className="inputItem" justify="start">
              <Flex.Item className="label flex-inherit">管理员：</Flex.Item>
              <Switch checked={info.role === 1 ? true : false} onChange={checked => this.editInfo(checked, 'role')}/>
            </Flex>
          }
              {btnOptions}
          </Flex>
      </Flex>
    );
  }
}

